<template>
	<view class="content">
		<view :class="show ? 'fade-in' : 'fade-out'">
			<tn-swiper :list="list" mode="number" indicatorPosition="bottomRight" :height="400"></tn-swiper>
			<view class="box">
				<view class="user tn-flex tn-flex-col-center">
					<view class="left">
						<image :src="user.avatar" mode="" class="avatar"></image>
						<view class="audio tn-flex tn-flex-col-center tn-flex-row-center" @click.stop="play">
							<image src="https://web.lanmei.co/image/pause.png" class="play" v-if="playStatus" mode="">
							</image>
							<image src="/static/index/play.png" class="play" v-else mode=""></image>
							<text class="seconds">{{user.duration}}s</text>
						</view>
					</view>
					<view class="center">
						<view class="top tn-flex tn-flex-col-center">
							<text class="name">{{user.nickname}}</text>
							<view class="tagList tn-flex">
								<!-- 男 -->
								<view class="tag nan" v-if="user.sex == 1">
									<image src="/static/index/nan.png" class="img1" mode=""></image>
									<text>{{user.age}}</text>
								</view>
								<view class="tag nv" v-if="user.sex == 2">
									<image src="/static/index/nv.png" class="img2" mode=""></image>
									<text>{{user.age}}</text>
								</view>
								<view class="tag tag-bg" v-if="user.is_up == 1">
									<text>包上分</text>
								</view>
							</view>
						</view>
						<view class="bottom tn-flex tn-flex-col-center tn-flex-row-between">
							<view class="game-type tn-flex tn-flex-col-center">
								<image src="https://peiwanblogs.huolieniaowangluo.com/wx-image/wfw/wzry.png" mode="">
								</image>
								<text class="t1">{{user.game_name}}</text>
								<text class="t2">{{user.play_type_name}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="brief">
					个人简介：{{user.introduce}}
				</view>
				<view class="skill tn-flex tn-flex-direction-column tn-flex-row-around">
					<!-- <view class="skill-li tn-flex tn-flex-col-center tn-flex-row-between" v-if="user.is_up != 2">
						<text class="t1">是否提供包上分服务</text>
						<text class="t1">{{user.is_up == 0 ? '否' : '是'}}</text>
					</view> -->
					<template v-if="!isAuditVersion">
						<block v-for="(item,index) in user.goodsTags" :key="index">
							<view class="skill-li tn-flex tn-flex-col-center tn-flex-row-between">
								<text class="t1">{{item.game_tags_name}}</text>
								<text class="t1">{{item.game_tags_options}}</text>
							</view>
						</block>
						<view class="skill-li tn-flex tn-flex-col-center tn-flex-row-between">
							<text class="t1">约定时间</text>
							<text class="t1">{{user.start_time}}-{{user.end_time}}</text>
						</view>
					</template>
					<view class="skill-li tn-flex tn-flex-col-center tn-flex-row-between">
						<text class="t1">接单数量</text>
						<text class="t1">{{user.order_num}}</text>
					</view>
					<view class="skill-li tn-flex tn-flex-col-center tn-flex-row-between">
						<text class="t1">价格</text>
						<view class="price">
							<text class="p1">{{user.price}}海豚币</text>
							<text class="t1">/{{user.unit}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	const innerAudioContext = uni.createInnerAudioContext();
	export default {
		data() {
			return {
				list: [],
				id: '',
				user: '',
				show: false,
				playStatus: false,
				isAuditVersion: getApp().globalData.isAuditVersion
			}
		},
		onLoad(option) {
			this.id = option.id
			this.getUser()
		},
		methods: {
			async getUser() {
				try {
					let result = await this.$request({
						loading: 1,
						method: 'post',
						url: '/api/play_goods/info',
						data: {
							play_goods_id: this.id
						}
					})
					this.user = result.data.data
					innerAudioContext.src = this.user.voice
					this.list = this.user.images.split(',')
					this.show = true
				} catch (e) {
					//TODO handle the exception
				}
			},
			// 播放音频
			play() {
				this.playStatus = !this.playStatus
				if (this.playStatus) {
					innerAudioContext.play()
				} else {
					innerAudioContext.stop()
				}
			},
		},
		onReady() {

		}
	}
</script>
<style lang="scss" scoped>
	.content {
		.box {
			padding: 30rpx;
			background: #fff;

			.user {
				height: 216rpx;

				.left {
					position: relative;
				}

				.avatar {
					width: 128rpx;
					height: 128rpx;
					border-radius: 50%;
				}

				.audio {
					height: 32rpx;
					position: absolute;
					bottom: 0;
					left: 22rpx;
					right: 22rpx;
					background: linear-gradient(90deg, #F783C3 0%, #A66FF7 100%);
					border-radius: 16rpx;

					.play {
						width: 22rpx;
						height: 22rpx;
					}

					.seconds {
						font-size: 20rpx;
						font-weight: 400;
						color: #FFFFFF;
						margin-left: 5rpx;
					}
				}

				.center {
					flex: 1;
					padding-left: 24rpx;

					.top {
						margin-bottom: 25rpx;

						.name {
							font-size: 32rpx;
							font-weight: bold;
							color: $uni-text-color;
						}

						.state {
							.dian {
								width: 8rpx;
								height: 8rpx;
								border-radius: 50%;
								margin-right: 4rpx;
							}

							.text {
								font-size: 20rpx;
								font-weight: 400;
							}
						}

						.off-line {
							.dian {
								background: #999999;
							}

							.text {
								color: #979393;
							}
						}

						.tagList {
							margin-left: 16rpx;

							.tag {
								height: 34rpx;
								border-radius: 6rpx;
								font-size: 22rpx;
								font-weight: 400;
								color: #FFFFFF;
								padding: 0 8rpx;
								line-height: 34rpx;
								margin-right: 10rpx;

								.img1 {
									width: 16rpx;
									height: 16rpx;
									margin-right: 6rpx;
								}

								.img2 {
									width: 14rpx;
									height: 18rpx;
									margin-right: 6rpx;
								}
							}

							.nan {
								background: #69B7FD;
							}

							.nv {
								background-color: #FF91CF;
							}

							.tag-bg {
								background: linear-gradient(180deg, #E2A2B5 0%, #F677B3 100%);
								border-radius: 6rpx;
							}
						}
					}

					.bottom {
						.game-type {
							//height: 40rpx;
							//background: linear-gradient(90deg, #654798 0%, #211C3A 100%);
							//border-radius: 21rpx;
							height: 22px;
							background: linear-gradient(133deg, #D0D5FF 0%, #FFFFFF 100%);
							border-radius: 4px 4px 4px 4px;
							width: fit-content;
							padding-left: 8rpx;
							padding-right: 20rpx;

							image {
								width: 30rpx;
								height: 30rpx;
								border-radius: 50%;
							}

							.t1 {
								font-size: 22rpx;
								font-weight: 400;
								color: #333333;
								margin-left: 6rpx;
								margin-right: 20rpx;
							}

							.t2 {
								font-size: 22rpx;
								font-weight: 400;
								color: #892fe8;
							}
						}
					}
				}
			}

			.brief {
				font-size: 26rpx;
				font-weight: 500;
				color: #333333;
			}

			.skill {
				background: #efefef;
				border-radius: 20rpx;
				padding: 26rpx 32rpx 0 32rpx;
				margin-top: 32rpx;

				&-li {
					margin-bottom: 24rpx;

					.t1 {
						font-size: 28rpx;
						font-weight: 500;
						color: #333333;
					}

					.price {
						.p1 {
							color: #e83a30;
							font-size: 30rpx;
							font-weight: Bold;
						}
					}
				}
			}
		}
	}
</style>